<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>cesium示例</title>
</head>
<!--Cesium js文件引入 -->
<script src="./js/earthsdk.js"></script>
<!-- 自定义Css样式 -->
<link rel="stylesheet" href="./css/example1.css" />

<style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #app {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    button {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 999;
    }
</style>

<body>
    <div id="app"></div>
    <div id="panel">
        <label for="">深度检测</label>
        <input type="checkbox" id="depthTest" onchange="setDepthTest()">

    </div>

    <script>
        /** -----------------------------------------地球创建----------------------------------------------------**/

        // Vue中引入方式：import { ESObjectsManager } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';

        const { ESObjectsManager } = XE2["esobjs-xe2-plugin-main"];
        const objm = new ESObjectsManager();
        window.g_objm = objm;


        // 通过earthsdk创建的Cesium视口
        const viewer = objm.createCesiumViewer({
            domid: document.getElementById("app"),
        });
        // 监听视口状态
        viewer.statusChanged.don(status => {
            if (status == 'Created') {
                // 视口创建完成，飞到初始视角位置
                objm.activeViewer.flyIn([
                    109.46897209738209,
                    25.60243318325431,
                    3839.701612002899
                ], [
                    231.08300859259978,
                    -43.52794875463852,
                    359.9990378129368
                ], 3)
            }
        })

        /**-------------------------------------cesium地形-------------------------------**/
        /**
         * 1.cesium官方地形需要到官网申请token
         * 2.将token设置给当前视口下的ionAccessToken
        */
        const { ESTerrainLayer } = XE2['esobjs-xe2-plugin-main']
        const sceneObject = objm.createSceneObject(ESTerrainLayer)
        sceneObject.url = 'ion://1'
        //token需要到cesium官网申请 https://ion.cesium.com/
        objm.activeViewer.ionAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlMGJlNTYyMS05YzIzLTQ5NmYtOTA4My1hYzYwMTlkMjVmZTEiLCJpZCI6MTk3ODAxLCJpYXQiOjE3MDg5MDg3NTF9.TIhdHyy6gBeHCLRHfsw7klG5ObX-OpD6e0VfqiH6AWE'


        // 通过json创建一个影像图层
        const imageryLayer = objm.createSceneObjectFromJson({
            id: "9812a65f-0de0-4f7b-b234-809c0c2fb8ef",
            type: "ESImageryLayer",
            url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        });

        // 通过json创建一个水面
        const water = objm.createSceneObjectFromJson({
            "id": "b1de829e-9557-4160-ad8d-5bce5b0acc1d",
            "type": "ESGeoWater",
            "name": "水面1",
            "collision": false,
            "fillStyle": {
                "color": [
                    1,
                    1,
                    1,
                    0.5
                ],
                "material": "",
                "materialParams": {},
                "ground": false
            },
            "points": [
                [
                    109.43235747958904,
                    25.5805256080958,
                    80.45478865786157
                ],
                [
                    109.44144155913996,
                    25.575467126027206,
                    134.9484153312277
                ],
                [
                    109.44828803871671,
                    25.584018012885405,
                    195.63219833204514
                ],
                [
                    109.43754534214055,
                    25.58717836897931,
                    244.25327484084679
                ]
            ],
            "waterColor": [
                0.1497,
                0.165,
                0.0031,
                1
            ]
        });

        // 设置深度检测
        const setDepthTest = () => {
            objm.activeViewer.innerViewer.sceneGlobeDepthTestAgainstTerrain = document.getElementById("depthTest").checked
        }
    </script>
</body>

</html>